<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-10-17 17:28:56
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-12-02 17:57:48
 * @Description: 充电状态tag组件
 * @FilePath: \charging-mini\充电项目\src\components\StatusTag.vue
-->
<template>
    <div class="status-tag" :class="[status]">{{ statusMap[status] }}</div>
</template>
<script>
export default {
    props: {
        status: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            statusMap: {
                FINISH: "已完成",
                CHARGING: "充电中",
                NO_PLUGGED: "未插电",

                INVOICE_CREATE: "开票中",
                INVOICE_FINISH: "已开票",
                INVOICE_REFUSE: "已拒绝",
            },
        };
    },
};
</script>
<style lang="less" scoped>
.status-tag {
    font-size: 22rpx;
    line-height: 1;
    width: 90rpx;
    height: 40rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    &.FINISH {
        background-color: #f6f6f6;
        color: #656565;
    }
    &.CHARGING {
        background-color: #08bfa8;
        color: #fff;
    }
    &.NO_PLUGGED {
        background-color: #e6a23c;
        color: #fff;
    }
    &.INVOICE_CREATE {
        background-color: #e6a23c;
        color: #fff;
    }
    &.INVOICE_FINISH {
        background-color: #08bfa8;
        color: #fff;
    }
    &.INVOICE_REFUSE {
        background-color: #ff5e5e;
        color: #fff;
    }
}
</style>
